<template>
  <div class="rowTp">
    <div class="top">
      <h2>
        当前，影响企业安全生产诚信等级评定业务的主要因素是否是安全生产标准化在诚信评定总分中的占比问题？
      </h2>
    </div>
    <div class="bottom">
      <!-- 1 -->
      <div class="box">
        <div class="col_1 echarts" id="rowTp_col_1"></div>
      </div>
      <!-- 2 -->
      <div class="box">
        <div class="col_2 echarts" id="rowTp_col_2"></div>
      </div>
      <!-- 3 -->
      <div class="box">
        <div class="col_3 echarts" id="rowTp_col_3"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "rowTp",
  // 数据
  data() {
    return {};
  },
  mounted() {
    this.getColTp_1(document.querySelector("#rowTp_col_1"), "全部投票");
    this.getColTp_2(document.querySelector("#rowTp_col_2"), "诚信注册企业投票");
    this.getColTp_3(document.querySelector("#rowTp_col_3"), "行政部门投票");
  },
  watch: {},
  methods: {
    // tp-1
    async getColTp_1(domName, title) {
      const { data: res } = await this.$http.get(
        "http://172.16.1.170:8080/cxdsj/dsjAction.tpallSelect.do"
      );
      // console.log('Tp.1', res);
      let str = res.substring(5);
      let tpAll = eval("(" + str + ")");
      // console.log('Tp.1', tpAll);
      const myChart = echarts.init(domName);
      var option = {
        title: {
          text: title,
          textStyle: {
            color: "#8fc4ff",
            fontsize: "25px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        tooltip: {
          trigger: "item",
        },
        color: ["#4287f5", "#50c983", "#f4f2c6"],
        series: [
          {
            // name: '',
            type: "pie",
            radius: ["40%", "60%"],
            center: ["50%", "55%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            label: {
              normal: {
                formatter: ["{c|{c}票}", "{b|{b}}"].join("\n"),
                rich: {
                  c: {
                    color: "rgb(241,246,104)",
                    fontSize: 20,
                    fontWeight: "bold",
                    lineHeight: 5,
                  },
                  b: {
                    color: "rgb(98,137,169)",
                    fontSize: 15,
                    height: 40,
                  },
                },
              },
            },
            // data: [
            //   { value: 1048, name: '是' },
            //   { value: 735, name: '否' },
            //   { value: 300, name: '其他' }
            // ],
            data: tpAll,
            labelLine: {
              length: 10,
              show: true,
              length2: 30,
            },
          },
        ],
      };
      // 3.把配置项给实例对象
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // tp-2
    async getColTp_2(domName, title) {
      const { data: res } = await this.$http.get(
        "http://172.16.1.170:8080/cxdsj/dsjAction.tpqySelect.do"
      );
      // console.log("Tp.2", res);
      let str = res.substring(5);
      let tpQy = eval("(" + str + ")");
      const myChart = echarts.init(domName);
      var option = {
        title: {
          text: title,
          textStyle: {
            color: "#ffffff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        color: ["#63caff", "#3608FE"],
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        grid: {
          containLabel: true,
          left: 20,
          right: 20,
          bottom: "0%",
          top: "20%",
        },
        xAxis: {
          axisLabel: {
            color: "#c0c3cd",
            fontSize: 20,
            interval: 0,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#384267",
              width: 1,
              type: "dashed",
            },
            show: true,
          },
          // data: [
          //   '是',
          //   '否',
          //   '其他'
          // ],
          data: tpQy.map((item) => {
            return item.name;
          }),
          type: "category",
        },
        yAxis: {
          axisLabel: {
            color: "#c0c3cd",
            fontSize: 15,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#384267",
              type: "dashed",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#384267",
              width: 1,
              type: "dashed",
            },
            show: true,
          },
          name: "",
        },
        series: [
          {
            // data: [1200, 185, 112],
            data: tpQy.map((item) => {
              return item.value;
            }),
            type: "bar",
            barWidth: 60,
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: "#3A1BFD",
                  },
                  {
                    offset: 1,
                    color: "#3BEFFD",
                  },
                ],
              },
            },
            label: {
              show: true,
              position: "top",
              distance: 10,
              color: "#fff",
            },
          },
          {
            data: [1, 1, 1, 1, 1, 1, 1],
            type: "pictorialBar",
            barMaxWidth: "60",
            symbol: "diamond",
            symbolOffset: [0, "50%"],
            symbolSize: [30, 15],
          },
          {
            // data: [1200, 185, 112],
            data: tpQy.map((item) => {
              return item.value;
            }),
            type: "pictorialBar",
            barMaxWidth: "60",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [30, 12],
            zlevel: 2,
          },
        ],
        tooltip: {
          trigger: "item",
          show: false,
        },
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // tp-3
    async getColTp_3(domName, title) {
      const { data: res } = await this.$http.get(
        "http://172.16.1.170:8080/cxdsj/dsjAction.tpglSelect.do"
      );
      // console.log('tpXz', res);
      let str = res.substring(5);
      let tpXz = eval("(" + str + ")");
      const myChart = echarts.init(domName);
      var option = {
        title: {
          text: title,
          textStyle: {
            color: "#8fc4ff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },

        visualMap: {
          show: false,
          min: 500,
          max: 600,
          inRange: {
            //colorLightness: [0, 1]
          },
        },
        series: [
          {
            // name: '访问来源',
            type: "pie",
            radius: "65%",
            center: ["50%", "55%"],
            color: ["#a35ae0", "#1fa9e3", "#0cebea"],
            // color: ['#FBFE27','rgb(11,228,96)','#FE5050'], //'#FBFE27','rgb(11,228,96)','#FE5050'
            // data: [{
            //         value: 1285,
            //         name: '是'
            //     },
            //     {
            //         value: 410,
            //         name: '否'
            //     },
            //     {
            //         value: 274,
            //         name: '其他'
            //     }
            // ]
            data: tpXz.sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",

            label: {
              normal: {
                formatter: ["{c|{c}票}", "{b|{b}}"].join("\n"),
                rich: {
                  c: {
                    color: "rgb(241,246,104)",
                    fontSize: 20,
                    fontWeight: "bold",
                    lineHeight: 5,
                  },
                  b: {
                    color: "rgb(98,137,169)",
                    fontSize: 15,
                    height: 40,
                  },
                },
              },
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: "rgb(98,137,169)",
                },
                smooth: 0.2,
                length: 10,
                length2: 20,
              },
            },
            itemStyle: {
              normal: {
                shadowColor: "rgba(0, 0, 0, 0.8)",
                shadowBlur: 50,
              },
            },
          },
        ],
      };
      // 3.把配置项给实例对象
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.rowTp {
  .top {
    position: relative;
    height: 80px;
    margin-top: 20px;
    margin-bottom: 10px;
    background: url(@/static/images/line_1.png) rgba(225, 255, 255, 0.03);

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 80px;
      height: 20px;
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
      content: "";
    }

    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 80px;
      height: 20px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
      content: "";
    }
    h2 {
      color: #f5a943;
      text-align: center;
      line-height: 40px;
      font-size: 24px;
      padding-top: 20px;
    }
  }
  .bottom {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    height: 350px;
    .box {
      // flex: 3.5;
      position: relative;
      height: 100%;
      width: 30%;
      border: 1px solid #1480f0;
      &:nth-child(2) {
        width: 39%;
        border: 1px solid #1480f0;
      }

      & /deep/ .el-input__inner {
        background-color: transparent !important;
        max-width: 120px !important;
        max-height: 30px !important;
        color: #fff;
      }

      .echarts {
        position: relative;
        padding: 10px !important;
        height: 100%;
        width: 100%;

        // & /deep/ canvas {
        //   //background-color: #333;
        // }
      }

      &:nth-child(2n - 1) {
        border: 1px solid rgba(25, 186, 139, 0.17);
        background: #050d4b url(@/static/images/line_1.png);
        padding: 0 0.1875rem 0.1875rem;
        margin-bottom: 0.1875rem;
        flex-direction: column;
        justify-content: space-between;
      }
      &:first-child {
        &::before {
          position: absolute;
          top: 0;
          left: 0;
          width: 10px;
          height: 10px;
          border-left: 2px solid #02a6b5;
          border-top: 2px solid #02a6b5;
          content: "";
        }
        &::after {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 10px;
          height: 10px;
          border-left: 2px solid #02a6b5;
          border-bottom: 2px solid #02a6b5;
          content: "";
        }
      }
      &:last-child {
        &::before {
          position: absolute;
          top: 0;
          right: 0;
          width: 10px;
          height: 10px;
          border-right: 2px solid #02a6b5;
          border-top: 2px solid #02a6b5;
          content: "";
        }
        &::after {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 10px;
          height: 10px;
          border-right: 2px solid #02a6b5;
          border-bottom: 2px solid #02a6b5;
          content: "";
        }
      }
    }
  }
}
</style>